import React from 'react'
import styled from 'styled-components'
import { useNavigate } from 'react-router-dom'
import { BiPowerOff } from "react-icons/bi"

export default function Logout() {
    const navigate = useNavigate();
    const handleClick = async () => {
        localStorage.clear();
        navigate("/login");
    }

    return (
        <Button onClick={handleClick}>
            <BiPowerOff></BiPowerOff>
        </Button>
    )
}

const Button = styled.button`
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    border-radius: 0.2rem;
    background-color: #9a86f3;
    cursor: pointer;
    svg {
        font-size: 1.3rem;
        color: #ebe7ff;
    }

    &:hover {
        background-color: #f36161;
    }
`;
